<!-- 最新会员 -->
<template>
  <div class="member card-margin">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="re-title">
        <span>最新会员</span>
      </div>

      <div class="mem" v-for="item in userList.slice(0,8)" :key="item">
        <img :src="item.avatar" alt="" />
        <div class="mem_name">{{ item.username }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
    };
  },
  created() {
    this.GetuserList(1);
  },
  methods: {
    GetuserList(currentPage) {
      const _this = this;
      this.$axios
        .post("/forum/user/list?currentPage=" + currentPage)
        .then((res) => {
          if (res.data.code === 200) {
            _this.userList = res.data.data.records;
          } else {
            this.$message.error("fail");
          }
        });
    },
  },
};
</script>

<style scoped>
.mem_name {
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member {
  width: 400px;
}

div.mem {
  border: 1px solid #eee;
  width: 70px;
  padding: 5px;
  display: inline-block;
  margin: 3px;
}

div.mem:hover {
  border: 1px solid rgb(82, 90, 214);
}
.mem img {
  width: 70px;
  height: 70px;
}

.card-margin {
  margin: 0 0 15px 20px;
}

.item {
  padding: 18px 0;
}

.box-card span {
  font-weight: bold;
}

.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.re-title {
  border-left: 3px solid #f56c6c;
  padding-left: 5px;
  font-size: 18px;
  text-align: left;
}
.el-icon-view {
  color: #aaa;
}
</style>
